<template>	
	<!-- menu -->
	<div id="meum">
		<div id="nav_box">
			<img id="img_wel" src="../../assets/img/welcome.svg" >
			<el-button 
			@click="isShow()"
			style="width:  1.5625rem;height: 1.5625rem;" 
			size="small" :icon="Expand" 
			icon-size="large" 
			v-model="isCollapse"
			>
			</el-button>
		</div>
		
		<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;display: none;">
			<el-radio-button  id="first" :label="false">expand</el-radio-button>
			<el-radio-button id="last" :label="true">collapse</el-radio-button>
		</el-radio-group>

		<el-menu
		    class="el-menu-vertical-demo"
			:collapse="isCollapse"			
			:collapse-transition="false"
		  >
			<span class="first_tip">
				&nbsp;&nbsp;Menu
			</span>
			  
			<el-menu-item index="1" @click="clickMenu('/data_statistic','data_statistic')" >
				<el-icon><histogram /></el-icon>								
				<template #title >数据统计</template>
		    </el-menu-item>
		    
			<el-menu-item index="2"  @click="clickMenu('/data_entry','data_entry')">
				<el-icon><edit /></el-icon>
				<template #title>详细数据</template>
		    </el-menu-item>
			
			<el-menu-item index="3"  @click="clickMenu('/wages','wages')">
				<el-icon><avatar /></el-icon>
				<template #title>员工薪资</template>
			</el-menu-item>	
		    
			<span class="first_tip">
				Analysis
			</span>
			
			<el-menu-item index="4"  @click="clickMenu('/data_analysis','data_analysis')">
				<el-icon><data-analysis /></el-icon>
				<template #title>数据分析</template>
			</el-menu-item>

					
			<span class="first_tip">
				Statistic
			</span>	
			
			<el-menu-item index="5"  @click="clickMenu('/Industrys_trend','Industrys_trend')">
				<el-icon><finished /></el-icon>
				<template #title>行业趋势</template>
			</el-menu-item>	
			
			<span class="first_tip">
				&nbsp;&nbsp;Setup
			</span>
			
			<el-menu-item index="6"  @click="clickMenu('/settings','settings')">
				<el-icon><setting /></el-icon>
				<template #title>用户设置</template>
			</el-menu-item>	
		</el-menu>
		
		<div class="asideBottomImg" style="width:14.5rem;">
			<img src="../../assets/img/数据.svg" style="width:15rem;height:8.75rem;margin-left:-20px;">
		</div>  
		  
	</div>
	
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import router from "../../router/index.js";
	import 
	{ 	Expand ,
		Location,
		Document,
		Menu as IconMenu,
		Setting,
		Histogram,
		DataAnalysis,
		Edit,
		Finished,
		Avatar	
	} from '@element-plus/icons-vue'
	const isCollapse = ref(false)
	function clickMenu(url,name){
		router.push({
			name:name,
			url:url
		})
	}
	const isShow = ()=>{
		if(isCollapse.value==true){
			document.querySelector("#first").click()
			document.querySelector("#img_wel").classList.remove("menuCollapse_img")
			document.querySelector("#nav_box").style.width="100%"
			document.querySelector("#nav_box").style.marginRight="18px"
			document.querySelector("#nav_box").style.borderRight="0px"
			document.querySelector(".el-aside").removeAttribute("style")
			document.querySelector(".asideBottomImg").style.display="block"
		
		}else{
			document.querySelector("#last").click()
			document.querySelector("#img_wel").classList.add("menuCollapse_img")
			document.querySelector("#nav_box").classList.add("menuCollapse_nav_box")
			document.querySelector("#nav_box button").classList.add("menuCollapse_button")
			document.querySelector(".el-aside").style.width="65px"
			document.querySelector(".asideBottomImg").style.display="none"
			
			
		}
	}
</script>


<style scoped="scoped">
	
	.common-layout{
		height: 100%;
		}
	.el-container{
		height: 100%;
		}
	#nav_box{
		height: 4.375rem;
		width: 100%;
		font: Monospace;
		/* border-bottom:0.0625rem #c0bcbc8f solid; */
	}
	#nav_box img:first-child{
		float: left;
		margin-top: 0.625rem;
		margin-left: 1.25rem;
		width: 7.5rem;
		height: 3.125rem;
	}
	#nav_box button{
		float: right;
		margin-top:1.5625rem;
		margin-right: 0.9375rem;
	}
	.el-menu{
		border-right: 0px;
	}
	.first_tip{
		display: inline-block;
		padding-top:1.6875rem;
		padding-left:8px;
		font-family: 100;
		line-height:0.625rem;
		font-weight:bold;
		color:#545a6d;
		font-size: 0.001rem;
	}
	#menu{
		float: left;
		height: 100%;		
	}

	.menuCollapse_img{
		display: none;
	}
	.menuCollapse_nav_box{
		width: 3.9375rem;
	}
	.menuCollapse_button{
		margin-right: 1.1rem;
	}
	:deep(.menuCollapse_aside){
		width: 65px !important;
	}
	@media screen and (max-width: 768px) {
		.el-aside{
			width: 0rem;
		}
		#meum{
			width: ;
		}
	}
</style>
